<template>
  <div class=''>
    <div>
      <span>{{mydate}}</span>
    </div>
    <van-calendar
      title="签到"
      :poppable="false"
      :style="{ height: '300px' }"
      row-height="40"
      :show-title=false
      :show-confirm = false
      :default-date="date"
      type='multiple'
      @confirm='onConfirm'
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>
</template>
<script>

export default {
  data () {
    return {
      text: '',
      show: false,
      date: [], // 默认显示的数组
      mydate: '',
      nowTime: '', // 当天中国标准时间
      minDate:'',
      maxDate:'',
      nowMonth: ''
    }
  },
  created() {
    // 初始获取显示数组，转化后push到data中默认显示数组
    let dd = 1608048000000
    let date = new Date(dd)
    this.date.push(date)

    // 获取当天日期格式化
    let now = new Date()
    let mowTime = this.msToDate(now).withoutTime
    this.nowTime = new Date(mowTime)

    // // 计算最小时间和最大时间， 设置显示区间
    let nowYear = new Date().getFullYear() // 获取当前年份
    let nowMonth = new Date().getMonth() + 1 // 获取当前月份
    let minMonth = nowYear + '/' + nowMonth + '/1'  // 最小时间区域
    let maxMonth = nowYear + '/' + nowMonth + '/31' // 最大时间区域 超出会自动到下一月
    this.minDate = new Date(minMonth)
    this.maxDate = new Date(maxMonth)
  },
  methods: {
    onConfirm(date) {
      this.show = false;
      this.text = `选择了 ${date.length} 个日期`
      let datdd = new Date(date)

      console.log(date)

    },

    // 格式化日期函数
    msToDate (msec) {
        let datetime = new Date(msec);
        let year = datetime.getFullYear();
        let month = datetime.getMonth();
        let date = datetime.getDate();
        let hour = datetime.getHours();
        let minute = datetime.getMinutes();
        let second = datetime.getSeconds();

        let result1 = year + 
                    '/' + 
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) + 
                    '/' + 
                    ((date + 1) < 10 ? '0' + date : date) + 
                    ' ' + 
                    ((hour + 1) < 10 ? '0' + hour : hour) +
                    ':' + 
                    ((minute + 1) < 10 ? '0' + minute : minute) + 
                    ':' + 
                    ((second + 1) < 10 ? '0' + second : second);

        let result2 = year + 
                    '/' + 
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) + 
                    '/' + 
                    ((date + 1) < 10 ? '0' + date : date);

        let result = {
            hasTime: result1,
            withoutTime: result2
        };

        return result;
    }
    
  },
}
</script>

<style scoped>
</style>
